<template>
  <p style="text-align:center">南宁软件园中心 - 梁世燊 - JSDTN240308 - 潘嘉嘉</p>
<!--首页-->
 <div class="header">
  <img src="https://www.atzuche.com/static/media/pc-banner-20231026.8e45f667.png" alt="">
   <div class="main-register">
     <h4 style="margin-top: 0;font-size: 18px;">注册即享<span style="color: darkorange">1680元</span>租车大礼包</h4>
     <input type="text" placeholder="请输入手机号" ><br>
     <input type="text" placeholder="请输入验证码" >
     <div style="font-size: 13px;margin-bottom: 12px;">
       <input type="checkbox" style="height: 14px;width: 14px;padding: 0;vertical-align: middle;" >
       <a>我同意</a><a>凹凸租车会员服务协议</a>和<a>凹凸租车隐私协议</a>
     </div>
     <el-button type="success" style="width: 100%;height: 50px;color: #fff;background-color: mediumseagreen" >注册领取</el-button>
     <p style="font-size: 10px;margin: 20px 0 0;text-align: center;" >让你的闲置车辆开始挣钱,<a>成为凹凸车主></a></p>
   </div>
 </div>
<!--注册页-->
  <div class="main">

<!--2.租车优势-->
    <div class="main-goodponit">
      <ul >
        <li>
          <div class="card">
            <el-icon size="50px"><Umbrella /></el-icon>
            <h3>高额度保障<br>保障无忧用车</h3>
            <p>全方位保障<br>用车更安心</p>
          </div>
        </li>
        <li>
          <div class="card">
            <el-icon size="50px"><RefreshRight /></el-icon>
            <h3>免租车押金<br>更低门槛</h3>
            <p>芝麻信用分达到650分以上<br>就可以免租车押金</p>
          </div>
        </li>
        <li>
          <div class="card">
            <el-icon size="50px"><Iphone /></el-icon>
            <h3>手机在线下单<br>流程一目了然</h3>
            <p>押金支付，用车流程，违章理赔<br>app里全搞定</p>
          </div>
        </li>
        <li>
          <div class="card">
            <el-icon size="50px"><User /></el-icon>
            <h3>车管家取送车<br>上门服务</h3>
            <p>车管家带您无忧换车</p>
          </div>
        </li>
      </ul>
    </div>
<!--more-->
    <div class="main-title" style="text-align: center;">
          <h2 >支持全国150个城市 各种车型任您选择</h2>
          <h3 >上海、北京、广州、深圳、南京、杭州、苏州、成都、重庆…</h3>
    </div>
    <div class="main-carlist ">
      <el-row :gutter="24" style="box-shadow: none">
        <el-col :span="8" v-for="p in productArr"  style="box-shadow: none" >
          <img :src="p.url" style="width: 100%">
          <el-card style="box-shadow: none;border: none;font-family:'黑体';" >
            <div style="margin:0px 0px 80px 0px">
               <span style="float:left;color:black;">
                 {{p.title}}
               </span>
              <span style="float: right;color:red;">{{p.name}}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <p style="margin: 0 auto">每台车主都有各自的定价方案，平台还有各种优惠卷可供您使用,具体价格可参见APP</p>
    <div class="more-car" >
      <span style="text-align: center;color: #42b983">查看更多车辆</span>
      <img src="">
      <template>
        <el-popover
            placement="top-start"
            title="Title"
            :width="200"
            trigger="hover"
            content="查看更多车辆 请下载凹凸租车APP"
        >
          <template #reference>
            <el-button class="m-2">查看更多车辆</el-button>
          </template>
        </el-popover>
      </template>
    </div>
<!--    租车时长-->
    <div class="main-title" style="text-align: center;">
      <h2>长租、短租、超短租… 各种租车方式应有尽有</h2>
      <h3>长租更划算、短租更快捷、超短租更随意</h3>
    </div>

    <div class="main-app">
      <ul>
        <li style="background-image: url(https://www.atzuche.com/static/media/rentway1.b5621f1a.png);">
          <div class="main-app-text" >
            <h3>短租</h3>
            <span>8小时起租</span>
            <p>适合家庭、朋友出游时使用，或临时工作代步或商务接客用车。别克GL8、丰田SUV、敞篷跑车……各车型随你选。</p>
          </div>
        </li>
        <li style="background-image: url(https://www.atzuche.com/static/media/rentway2.e61c20e7.png);">
          <div class="main-app-text">
            <h3>长租</h3>
            <span>一个月起租</span>
            <p>适合商务用车，或个人日常代步用车，费用更划算。车型配有经济型、舒适型、SUV、MPV、豪华型、尊贵型等车型，满足您的多层次用车体验。</p>
          </div>
        </li>
        <li style="background-image: url(https://www.atzuche.com/static/media/rentway3.15796cae.png);">
          <div class="main-app-text" >
            <h3>超短租</h3>
            <span>不限时间</span>
            <p>适合市内临时用车需求，比如上下班使用。找车方便，停车灵活，费用低廉，随取随还。现为凹凸租车旗下独立APP“凹凸共享车”。</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="more-car">
      <el-popover
          placement="top-start"
          :width="200"
          trigger="hover"
      >
        <template slot="content">
          <div style="text-align: center;">
            <img src="https://cdn.atzuche.com/pc/qr/app.png" alt="图片显示错误">
            <span>查看更多内容<br>请下载<a href="#">凹凸汽车</a>APP</span>
          </div>
        </template>
        <template #reference>
          <span style="text-align: center;color: #42b983">查看更多租车方式</span>
        </template>
      </el-popover>

    </div>
    <div class="main-appview">
      <div class="main-title" >
        <h2>凹凸汽车<br> <span style="font-size: 30px" >跟着好奇心出发</span></h2>
        <h3 style="color: #a0a0a0;">短租、长租、时租、自助找车、快捷租车……<br>万款车型，随您选择</h3>
        <div class="main-appview-button" style="margin: 80px 0px 80px 0px">
          <el-button round type="success">下载APP</el-button>
        </div>
        <a style="float: left;width: 180px;height: 21px;" >隐私协议</a>
        <a style="float: left;width: 180px;height: 21px;">用户权限</a>
        <br>
        <p>开发者名称：上海馨煜信息科技有限公司</p>
        <p>更新时间:</p>
      </div>


      <div class="main-appview-right" >
        <img src="https://gd-hbimg.huaban.com/fab164c51b2968ffbd47191874573707b3155d4f20a51-A6vpu8_fw240webp">
        <img src="https://gd-hbimg.huaban.com/645454412dab5997baebd766d0153f9983ee2af44aafd-QAoAC6_fw240webp">
        <img src="https://gd-hbimg.huaban.com/9575271062fc11d7a247501c95552a4171e7bced35e37-hkLRUE_fw240webp">
      </div>
    </div>

    </div>

</template>
<!--租车优势-->

<!--车型选择-->
<!--租车时间-->
<!--下载app-->

<script setup>
import {ref} from "vue";
const productArr = ref([
  {title: "高尔夫 R", name: "5.0分", url: "https://www.atzuche.com/static/media/car2.dd042d39.jpg"},
  {title: "宝马 Z4", name: "5.0分", url: "https://www.atzuche.com/static/media/car2.dd042d39.jpg"},
  {title: "特斯拉 Model S", name: "5.0分", url: "https://www.atzuche.com/static/media/car3.ca0216c8.jpg"},
  {title: "福特 野马", name: "5.0分", url: "https://www.atzuche.com/static/media/car4.7b0694ab.jpg"},
  {title: "宝马 5系", name: "5.0分", url: "https://www.atzuche.com/static/media/car5.2eb99e19.jpg"},
  {title: "奥迪 A7", name: "5.0分", url: "https://www.atzuche.com/static/media/car6.b1508805.jpg"},
  {title: "雪佛兰 科迈罗", name: "5.0分", url: "https://www.atzuche.com/static/media/car7.6030eb56.jpg"},
  {title: "MINI ONE", name: "5.0分", url: "https://www.atzuche.com/static/media/car8.55b03b41.jpg"},
  {title: "保时捷 911", name: "5.0分", url: "https://www.atzuche.com/static/media/car9.d4efc378.jpg"},
]);

</script>


<style scoped>
body{
  margin: 0;
  padding: 0;
}
.header{
  margin:0 auto;
  height: 100%;
  position: relative;
}
.header>img{
  width: 100%;
  object-fit: cover; /* 保持原图宽高比并填充容器 */
}
.main{
  height: 100%;
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.main-register{
  box-sizing: border-box;
  width: 342px;
  padding: 28px 36px;
  background-color: #ffffff;
  margin: 0 auto;
  position: absolute;
  right: 10%;
  bottom: -30px;
  z-index: 10;
  box-shadow: 0 25px 60px 0 rgba(0,100,115,.15);
}
.main-register required{
  position: absolute;
  right: 200px;
}
.main-register input{
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  margin-bottom: 10px;
  background-color: #f5f5f5;
  font-size: 12px;
  padding-left: 15px;
  padding-right: 10px;
  border: 1px solid #f5f5f5;
  outline-style: none;
}
.main a{ color: #13ce66}
.main-goodponit{
  height: 299px;
  margin: 0 auto;
}
.main .main-goodponit ul{
  list-style-type: none;
  display: flex;
  width: 100%;
  margin: 0 auto;
}
.main .main-goodponit li{
  text-align: left;
  margin: 51px 125px 60px 50px;
  width: auto;
  height: 80px;
  padding: 0px;
}

.main .main-goodponit h3{
  font-size: 20px;
  font-family: "华文宋体";
}
.main .main-goodponit p{
  color: #a0a0a0;
  font-size: 10px;
}
.main-more h2 {
  margin: 0px 0px 20px 0px;
}

.main-more h3{
  margin: 0px 0px 50px 0px;
}
.more-car{
  height: 80px;
  margin: 30px 0px 30px 0px;

}
.main-app ul{
  display: flex;
  list-style-type: none;
  width: 1200px;
  margin: 0px 0px 60px 0px;
}
.main-app li{
  width: 380px;
  height: 520px;
  text-align: left;
  padding-bottom: 20px;
  margin: 0px 30px 0px 0px ;
  background-size: cover;
  border-radius: 8px;
  background-color: rgba(0,0,0,1);
  background-image: linear-gradient(to top, rgba(0,0,255,0.3), rgba(0,0,255,0));

}


.main-app-text{
  margin: 0 auto;
  padding: 310px 26px 0px;
}
.main-title{
  margin: 0px 0px 50px 0px
}
.main-title h2{
  margin: 0px 0px 20px px;
  font-size: 30px
}
.main-title h3{
  margin-bottom: 50px;
  color: #a0a0a0;
}
.more-car{
  height: 60px;
  -webkit-box-shadow: 0 15px 50px 0 rgba(0,100,115,.15);
  box-shadow: 0 15px 50px 0 rgba(0,100,115,.15);
  border-radius: 4px;
  line-height: 60px;
  font-size: 14px;
  color: #37af83;
  text-align: center;
  margin-bottom: 120px;
}
.main-appview{
  height: 480px;
  width: 100%;
  margin: 20px 0px 0px 0px ;
  text-align: left;
}
.main-appview-right{
  width: 911px;
  height: 540px;
  left: 400px;
  bottom: 520px;
  position: relative;
}
.main-appview-right img{
  border-radius: 10px;
  width: 264px;
  height: 540px;
  margin: 0px 17px 0px 17px;
  box-shadow: 0px 0px 10px 1px black;


}
.footer{
  background-color: #2c3e50;
  color:#ffffff;
  height: 300px;
  width: 100%;
}


</style>
